


<template>
    <!-- 新建任务 -->
    <drag-modal :visible="editModal" centered :title="editItem.id ? '编辑任务' : '新增任务'" width="550px" @cancel="hideModal">
        <div class="renwu-from">
            <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>任务名称</div>
            <div class="renwu-secend"><a-input v-model="editItem.taskName"/></div>
        </div>
        <div class="renwu-from">
            <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>执行时间</div>
            <div class="renwu-secend">
                <a-date-picker
                    style="width:165px;min-width:auto;"
                    :disabled="editItem.startTimeMoment && (moment().startOf('day') > editItem.startTimeMoment)"
                    :format="dateFormat"
                    :disabled-date="startDisabledDate"
                    placeholder="任务开始时间"
                    :show-time="{ format: 'HH:mm' }"
                    v-model="editItem.startTimeMoment"
                />
                ~
                <a-date-picker
                    style="width:165px;min-width:auto;"
                    :format="dateFormat"
                    :disabled-date="endDisabledDate"
                    placeholder="任务结束时间"
                    :show-time="{ format: 'HH:mm' }"
                    v-model="editItem.endTimeMoment"
                />
                <!-- <a-range-picker
                :disabled-date="disabledDate"
                :disabled-time="disabledRangeTime"
                :show-time="{ format: 'HH:mm' }"
                :format="dateFormat"
                :placeholder="['任务开始时间', '任务结束时间']"
                :value="rangMoment"
                @change="onRangPickerChange"
                @ok="onRangPickerOk"
                /> -->
            </div>
        </div>
        <div class="renwu-from">
            <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>联系类型</div>
            <div class="renwu-secend">
                <a-select placeholder="请选择联系类型" v-model="editItem.taskType" style="width:165px;">
                    <a-select-option :value=1>销售联系</a-select-option>
                    <a-select-option :value=2>客户关怀</a-select-option>
                    <a-select-option :value=3>售后回访</a-select-option>
                    <a-select-option :value=4>投诉回访</a-select-option>
                    <a-select-option :value=5>服务支持</a-select-option>
                    <a-select-option :value=6>维修维护</a-select-option>
                    <a-select-option :value=7>客户投诉</a-select-option>
                </a-select>
            </div>
        </div>
        <div class="renwu-from">
            <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>外呼方式</div>
            <div class="renwu-secend"><a-radio-group v-model="editItem.callType">
                <a-radio :value="1">
                    人工
                    </a-radio>
                    <a-radio :value="2">
                    去电放音
                    </a-radio>
                </a-radio-group>
            </div>
        </div>
        <div class="renwu-from" v-show="editItem.callType === 2">
            <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>放音文件</div>
            <div class="renwu-secend">
                <a-select placeholder="请选择选择音频" :value="editItem.voiceId" @change="onVoiceChange" style="width:285px;">
                    <a-select-option :label="item.title" v-for="(item, index) in voiceSelectData" :key="item.key + index" :value="item.key" :title="item.title">
                        <i v-if="item.key" @click.stop="onVocieDelete(item)" class="fa fa-trash-alt mr-3" style="color: rgb(221, 90, 67);" />{{item.title}}
                    </a-select-option>
                </a-select>
                <!-- 上传音频 -->
                <a-upload
                    accept="audio/wav"
                    name="file"
                    :multiple="true"
                    :action="voiceUploadUrl"
                    :headers="uploadHeaders"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    @change="voiceUploadChange"
                    class="play-btns"
                    >
                    <a-icon type="plus-circle" style="font-size:20px;color:green;" title="音频只支持WAV格式,特别需要注意的是播放的语音文件建议采样率最大不要超过48000HZ，16位。因为设备自带声卡目前最大支持16位，48000HZ音质。语音文件要使用单声道，因为只有右声道声音可以被远端手机听到。"/>
                </a-upload>
                <!-- 暂停 -->
                <span v-if="voice_pay" @click="audioControl" class="play-btns"><a-icon type="pause-circle" style="font-size:20px;color:green;"/></span>
                <!-- 播放 -->
                <span v-else @click="audioControl" class="play-btns"><a-icon type="play-circle" style="font-size:20px;color:green;"/></span>
                <audio ref="voiceAudio" :src="editItem.voiceUrl" controls="controls" preload  hidden></audio>
            </div>
        </div>
     
        <div class="renwu-from">
            <div class="renwu-frisht">备注</div>
            <div class="renwu-secend"><a-textarea placeholder="请输入200字内的备注" :rows="1" v-model="editItem.remarks"/></div>
        </div>
        <template slot="footer">
            <a-button :style="{ marginLeft: '8px' }" @click="hideModal">关闭</a-button>
            <a-button type="primary" @click="handleSubmit">确定</a-button>
        </template>
    </drag-modal>
</template>

<script>
import moment from "moment";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { mapState } from "vuex";
import { FormInput, EditableCell } from "@/components/Form";
import { addTask } from "@/api/crm/call/callTask";
import { pageList as voicePageList,deleteVoice } from "@/api/crm/call/callVoice";


export default {
    components: {
        FormInput,
        EditableCell,
    },
    data () {
        return {
            editModal: false,
            editItem: {
                startTimeMoment: moment(),
            }, //新增/编辑对象
            //------------音频----------------
            voiceUploadUrl:this.$Global.ApiBaseUrl + '/crm/callVoice/uploadVoice',
            voiceSelect:"",         //选择的值
            voiceSelectData:[],     //所有值
            voiceMap:new Map(),     //音频Map 存储
            uploadHeaders:{},       //音频上传 请求头部
            voice_pay: false,       // 语音播放
            // dateFormat: "YYYY-MM-DD HH:mm", //任务时间格式
            dateFormat: "YYYY-MM-DD", //任务时间格式
            rangMoment: [], 
        };
    },
    created(){
       
        const token = Vue.ls.get(ACCESS_TOKEN);
        if (token) {
            this.uploadHeaders[ACCESS_TOKEN] = token; 
        }
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
       
    },
    methods: {
        openTaskModal(editItem){
            // let voiceAudioDom = this.$refs.voiceAudio;
            // if(voiceAudioDom){
            //     voiceAudioDom.src = "";
            // }
            this.voicePage();
            this.editModal = true;
            this.editItem = editItem;
        },
        moment,
        // 禁用开始时间(开始时间不能大于当前时间)
        startDisabledDate(current) {
            let { endTimeMoment } = this.editItem;
            let nowDay = moment().startOf('day');
            if (!endTimeMoment) {
                return current < nowDay;
            }
            return current <= nowDay || current.valueOf() > endTimeMoment.valueOf();
        },
        // 禁用结束时间
        endDisabledDate(current)  {
            let { startTimeMoment,endTimeMoment } = this.editItem;
            let nowDay = moment().startOf('day');
            if (!startTimeMoment) {
               return current < nowDay;
            }
            return current < nowDay || current.valueOf() < startTimeMoment.valueOf();
        },
   
        hideModal () {
            this.editModal = false;
            this.roleModal = false;
        },
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size: pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //监听 呼叫模式 更改
        OnCahngeCallingType(e){
            let value = e.target.value;
            
        },
        //重播语音
        audioRepeat(){
            let voiceAudioDom = this.$refs.voiceAudio;
            if(voiceAudioDom){
                voiceAudioDom.currentTime = 0;//重新播放
            }
        },
        //播放/暂停
        audioControl(){
            let voiceAudioDom = this.$refs.voiceAudio;
            console.log("播放音频",voiceAudioDom);
            if(voiceAudioDom){
               if(voiceAudioDom.paused){
                    this.voice_pay = true;
                    voiceAudioDom.play();// 播放
                }else{
                    this.voice_pay = false;
                    voiceAudioDom.pause();// 暂停
                }
            }
        },
        //选择 音频 事件
        onVoiceChange(key){
            
            let voiceItem = this.voiceMap.get(key);
            if(voiceItem){
                let {id,voiceName,voiceUrl} = voiceItem;
                Object.assign(this.editItem,{voiceName,voiceUrl});
                this.$set(this.editItem,"voiceId",key);
            }
            console.log("选择 音频 事件",key,this.editItem)
        },
        //删除 音频 事件
        onVocieDelete(item){
            let _this = this;
            this.$confirm({
                title: '确认',
                content: <span>您确定要{<span style='color:red;'>删除</span>}该音频吗？</span>,
                onOk () {
                        deleteVoice({id:item.key}).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("删除成功");
                            if(_this.editItem.voiceId == item.key){
                                Object.assign(_this.editItem,{voiceName:null,voiceUrl:null});
                                _this.$set(_this.editItem,"voiceId",null);
                            }
                            //刷新 列表
                            _this.voicePage();
                        }
                    });
                },
                onCancel () { },
            });
        },
        //上传之前
        beforeUpload(file) {
            const isOK =
            //  file.type.indexOf("audio") > -1;
                    file.type === "audio/wav";
            if (!isOK) {
                this.$message.error("只能选择wav的音频!");
                // this.$message.error("只能选择音频!");
            }
            const isLimitSize = file.size / 1024 / 1024 < 5;
            if (!isLimitSize) {
                this.$message.error("音频不能超过5MB!");
            }
            return isOK && isLimitSize;
        },
        //上传音频
        voiceUploadChange(info){
            let status = info.file.status;
            switch(status){
                case "done":{
                    let { response } = info.file;
                    if(response.code == 200){
                        this.$message.success(info.file.name +",上传成功!");
                        this.voicePage();
                    }else{
                        this.$message.error(info.file.name +",上传s失败!");
                    }
                };break;
                case "error":{
                    this.$message.error(info.file.name +",上传失败!");
                };break;

            }
            console.log("上传音频-->结果：",info);
        },
        //获取音频列表
        voicePage(){
            let voicePostData = {
                page:{
                   size:-1
                }
            }
            voicePageList(voicePostData).then(response => {
                console.log("获取音频列表", response);
                if (response.code === 200) {
                    const { data } = response;
                    const { records} = data;
                    this.voiceSelectData = [];
                    records.forEach(item=>{
                        this.voiceMap.set(item.id,item);
                        this.voiceSelectData.push({
                            key:item.id,
                            title:item.voiceName
                        });
                    });
                }
            }).catch(error => { });

        },
        //保存 任务
        handleSubmit (e) {
            e.preventDefault();
            const {editItem,dateFormat} = this;
            if(!editItem.taskName){
                this.$message.error("请输入任务名称");
                return;
            }
            if(!editItem.startTimeMoment){
                this.$message.error("请选择任务开始时间");
                return;
            }
            if(!editItem.endTimeMoment){
                this.$message.error("请选择任务结束时间");
                return;
            }
            if(editItem.endTimeMoment.valueOf() < editItem.startTimeMoment.valueOf()){
                this.$message.error("结束时间不能小于开始时间");
                return;
            }
            // if(editItem.endTimeMoment.valueOf() - (10*60*1000)  < editItem.startTimeMoment.valueOf()){
            //     this.$message.error("结束时间和开始时间必须间隔10分钟");
            //     return;
            // }
            if(!editItem.callType){
                this.$message.error("请选择外呼类型");
                return;
            }
            if(!editItem.taskType){
                this.$message.error("请选择联系方式");
                return;
            }
          
            if(editItem.callType == 2 && !editItem.voiceId){
                this.$message.error("自动播放语音模式,请选择音频");
                return;
            }
            editItem.startTime = editItem.startTimeMoment.format(dateFormat);
            editItem.endTime = editItem.endTimeMoment.format(dateFormat);
            console.log("开始保存:", editItem);
            delete editItem.createDate;
            delete editItem.distributeDate;
            addTask(editItem).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功")
                    //刷新 列表
                    this.selectedKeys = [];
                    this.selectedData = [];
                    this.$emit("callBack");
                    this.hideModal();
                } else {
                    this.$message.error("保存失败");
                }
            });
        },
   
      
       
    }
};
</script>
<style lang="less" scoped>
   .ant-input-number-handler-wrap {
        display: none !important;
    }
    /deep/.ant-modal-body{
        min-height: 335px !important;
    }
    .ant-radio-wrapper{
        line-height: 35px;
    }
    // .ant-calendar-picker{
    //     width: 165px;
    //     min-height: auto;
    // }
    .renwu-from {
         display: flex;
         min-height: 35px;
         line-height: 35px;
         margin-top: 10px;
         .renwu-frisht {
            width: 80px;
         }
         .renwu-secend {
            width: 350px;
            .play-btns {
                margin-left: 10px;
            }
            .ant-input,.ant-select-selection{
            width: 100%;
            outline: none;
            border: 1px solid #C6C1C1 !important;
            width: 100%;
            }
         }
     }
    // .form-inline label {
    //     justify-content: left !important;
    // }
    // .form-inline > .col {
    //     margin-bottom: 1.5rem !important;
    // }
    // .icons-list >>> .anticon {
    //     margin-right: 8px;
    //     font-size: 16px;
    // }
    // .ant-advanced-search-form {
    //     padding: 24px;
    //     background: #fbfbfb;
    // }

    // .ant-advanced-search-form .ant-form-item {
    //     display: flex;
    //     margin-bottom: 0px !important;
    // }

    // .ant-advanced-search-form .ant-form-item-control-wrapper {
    //     flex: 1;
    // }

    // #components-form-demo-advanced-search .ant-form {
    //     max-width: none;
    // }
    // #components-form-demo-advanced-search .search-result-list {
    //     margin-top: 16px;
    //     background-color: #fafafa;
    //     min-height: 200px;
    //     text-align: center;
    //     padding-top: 80px;
    // }
</style>